<%@ page import="com.scau.ums.model.User" %>
<%@ page import="com.scau.ums.util.tools.UserInfoTool" %>
<%@ page import="java.util.Map" %>
<%@ page import="com.scau.ums.model.Repairreport" %>
<%@ page import="java.util.List" %>
<%@ page import="com.scau.ums.util.tools.RepairReportTool" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="com.scau.ums.model.Info" %>
<%@ page import="com.scau.ums.model.Suggestion" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/7
  Time: 9:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>维修工功能界面</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,700,800,900%7CPoppins:300,400,500,600,700,800,900" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrapmin.css">
    <!-- Font-awesome CSS -->
    <link rel="stylesheet" href="css/font-awesomemin.css">
    <!-- Slick slider css -->
    <link rel="stylesheet" href="css/slickmin.css">
    <!-- animate css -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- Nice Select css -->
    <link rel="stylesheet" href="css/nice-select.css">
    <!-- jquery UI css -->
    <link rel="stylesheet" href="css/jqueryuimin.css">
    <!-- main style css -->
    <link rel="stylesheet" href="css/style.css">

    <link href="/css/maintainerEntrance.css" rel="stylesheet" type="text/css" />

    <style type="text/css">

    </style>

    <!-- JS
============================================ -->

    <!-- Modernizer JS -->
    <script src="js/modernizr-3.6.0min.js"></script>
    <!-- jQuery JS -->
    <script src="js/jquery-3.3.1min.js"></script>
    <!-- Popper JS -->
    <script src="js/poppermin.js"></script>
    <!-- Bootstrap JS -->
    <script src="js/bootstrapmin.js"></script>
    <!-- slick Slider JS -->
    <script src="js/slickmin.js"></script>
    <!-- Countdown JS -->
    <script src="js/countdownmin.js"></script>
    <!-- Nice Select JS -->
    <script src="js/nice-selectmin.js"></script>
    <!-- jquery UI JS -->
    <script src="js/jqueryuimin.js"></script>
    <!-- Image zoom JS -->
    <script src="js/image-zoommin.js"></script>
    <!-- image loaded js -->
    <script src="js/imagesloadedpkgdmin.js"></script>
    <!-- masonry  -->
    <script src="js/masonrypkgdmin.js"></script>
    <!-- mailchimp active js -->
    <script src="js/ajaxchimp.js"></script>
    <!-- contact form dynamic js -->
    <script src="js/ajax-mail.js"></script>
    <!-- google map api -->
    <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCfmCVTjRI007pC1Yk2o2d_EhgkjTsFVN8"></script>
    <!-- google map active js -->
    <script src="js/google-map.js"></script>
    <!-- Main JS -->
    <script src="js/main.js"></script>

    <script src="js/jquery.js"></script>



<%--"我的"按钮判断跳转--%>
    <script>
        function wodeRedirect() {
            var jsUserType = '<%=request.getSession().getAttribute("USER_TYPE")%>';
            if(jsUserType=='<%=User.ADMIN%>')
            {
                window.location.href="/adminEntrance";
            }
            if(jsUserType=='<%=User.MAINTAINER%>')
            {
                window.location.href="/maintainerEntrance";
            }
            if(jsUserType=='<%=User.STUDENT%>'||jsUserType=='<%=User.TEACHER%>')
            {
                window.location.href="/userEntrance";
            }
        }
    </script>
    <link href="/css/verifySuggestions.css" rel="stylesheet" type="text/css" />
    <script src="/js/echarts.min.js"></script>

</head>
<body>


<header class="header-area">
    <div class="main-header d-none d-lg-block">
        <!--顶部left开始-->
        <div class="header-top black-bg">
            <div class="container">
                <!--顶部选择-->
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="top-left-navigation">
                            <ul class="nav align-items-center">
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6 d-flex justify-content-end">
                        <div class="header-social-link">
                        </div>
                        <ul class="user-info-block">
                            <!--登录开始-->
                            <%if (request.getSession().getAttribute("USER_NAME")==null){%>
                            <li><a href="/login"><i class="fa fa-sign-in"></i> 登录</a></li>
                            <%}else{%>
                            <ul class="nav">
                                <!--登录开始-->
                                <li class="mini-cart-wrap">
                                    <a href="/maintainerEntrance" class="minicart-btn">
                                        <span class="fa fa-user-circle-o"></span>
                                        <% String username=(String)request.getSession().getAttribute("USER_NAME");out.print(username);%>
                                    </a>

                                    <!--两个按钮开始-->
                                    <div class="cart-list-wrapper">
                                        <div class="minicart-button">
                                            <a onclick="wodeRedirect()"><i class="fa fa-user-plus"></i> 我的</a>
                                            <a href="/logout"><i class="fa fa-user-times"></i> 注销</a>
                                        </div>
                                    </div>
                                    <!--两个按钮结束-->
                                </li>
                                <!--登录结束-->
                            </ul>
                            <%}%>
                            <!--登录结束-->
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--顶部left结束-->

        <div class="header-main-area black-soft sticky">
            <div class="container">
                <div class="row align-items-center position-relative">
                    <!-- logo展示开始 -->
                    <div class="col-auto">
                        <div class="logo">
                            <a href="/">
                                <img src="img/2.jpg" alt="Brand Logo">
                            </a>
                        </div>
                    </div>
                    <!-- logo展示结束 -->
                    <div class="col-auto position-static">
                        <div class="main-menu-area">
                            <div class="main-menu">
                                <!-- 标签栏开始 -->
                                <nav class="desktop-menu">
                                    <ul>
                                        <li class="active"><a href="/">主页 <i class="fa fa-angle-left"></i></a>
                                        </li>
                                    </ul>
                                </nav>
                                <!-- 标签栏结束 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 统计报修单style开始 -->
<div class="blog-main-wrapper section-padding" >
    <div class="container">
        <div class="row" >

            <div class="col-lg-12  "style="margin:0 auto">
                <div class="blog-item-wrapper">


                    <!-- 分析报修单提交开始 -->
                    <div class="blog-comment-wrapper" style="margin: 0 auto">
                        <h5>报修单信息查看</h5>
                        <p>请将您遇到的问题交给我们！</p>
                        <form action="/showAnalysis" method="post">
                            <div class="comment-post-box">
                                <div class="row ">

                                    <%--报修图表--%>
                                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                                    <div class="col-md-4" id="showPieCharts" style="height:400px;float: left"></div>

                                    <div class="col-md-4" id="showHistogramCharts" style="height:400px;float: left"></div>

                                    <%--<div class="col-md-4" id="showLinkCharts" style="height:400px;float: left"></div>--%>
                                    <div class="col-md-4" id="showLikeCharts" style="height:400px;float: left"></div>

                                    <div class="col-lg-3 col-md-3 " >
                                        <div style="float: left">
                                        <label >时期选择：</label>
                                        </div>
                                        <div style="float: left">
                                            <select name="periodType" id="periodType" >
                                            <option value="0" selected="selected" <c:if test="${reportType=='0'}"></c:if>>全部</option>
                                            <option value="1"  <c:if test="${reportType=='1'}"></c:if>>最近一个月度</option>
                                            <option value="2" <c:if test="${reportType=='2'}"></c:if>>最近一个季度</option>
                                            <option value="3" <c:if test="${reportType=='3'}"></c:if>>最近一个年度</option>
                                        </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-3 col-md-3" style="float: left">
                                        <div style="float: left">
                                        <label>维修单类型：</label>
                                    </div>
                                        <div style="float: left">
                                        <select name="reportType" id="reportType">
                                        <option value="0" selected="selected" <c:if test="${reportType=='0'}"></c:if>>全部</option>
                                        <option value="1" <c:if test="${reportType=='1'}"></c:if>>供电</option>
                                        <option value="2" <c:if test="${reportType=='2'}"></c:if>>供水</option>
                                        <option value="3" <c:if test="${reportType=='3'}"></c:if>>修建</option>
                                        <option value="4" <c:if test="${reportType=='4'}"></c:if>>网络</option>
                                    </select>
                                        </div>
                                    </div>


                                    <div class="col-lg-3 col-md-3" >
                                        <div style="float: left">
                                            <label>报修者类型：</label>
                                         </div>
                                         <div style="float: left">
                                        <select name="reporterType" id="reporterType">
                                        <option value="0" selected="selected" <c:if test="${reporterType=='0'}"></c:if>>全部</option>
                                        <option value="学生" <c:if test="${reporterType=='学生'}"></c:if> >学生</option>
                                        <option value="老师" <c:if test="${reporterType=='老师'}"></c:if> >老师</option>
                                        </select>
                                         </div>
                                    </div>

                                    <div class="col-lg-1 col-md-1" style="float: left">
                                            <div >
                                                <button type="button" onclick="showAnalysis()" class="btn btn-sqr" id="showAnalysisInfo">查看</button>
                                            </div>
                                    </div>


                                    <div class="col-lg-2 col-md-2" style="float: left" >
                                            <div >
                                                <button type="button" onclick="showMantainer()" class="btn btn-sqr" id="showMantainerInfo">维修工情况</button>
                                            </div>
                                    </div>





                                    <!-- 分析报修单提交结束 -->

                                    <div class="col-lg-12 col-md-12" id="Analysislist" style="margin-top: 24px;">

                                    </div>

                                </div>
                            </div>
                            <%--查询列表--%>


                        </form>




                    </div>


                </div>
            </div>
        </div>
    </div>
</div>
<!-- 统计单style结束 -->




<!-- footer area start -->
<footer class="black-bg">
    <div class="footer-middle-area">
        <div class="container">
            <div class="row mtn-30">
                <div class="col-lg-6 col-sm-12">
                    <div class="address-block mt-30">
                        <div class="footer-logo">
                            <a href="/">
                                <img src="img/2.jpg" alt="Brand Logo">
                            </a>
                        </div>
                        <address class="address-info d-flex align-items-center">
                            <i class="fa fa-map-marker"></i>
                            <p><span>ADDRESS : </span> 梦翔大厦</p>
                        </address>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <address class="address-info email mt-30">
                        <i class="fa fa-envelope"></i>
                        <p><span>EMAIL : </span><a href="#">xxxx@qq.com</a></p>
                    </address>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <address class="address-info email mt-30">
                        <i class="fa fa-phone"></i>
                        <p><span>PHONE : </span><a href="#">158xxxxx9442</a></p>
                    </address>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom-area text-center">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="payment-method-list">

                    </div>

                    <p class="copyright">
                        Copyright © www.xxx.com
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- footer area end -->




<script type="text/javascript">
    function showMantainer() {
        // for (var i=0;i<data[8].length;i++) {
        //     document.getElementById("maintainer").options.add(new Option(data[8][i].name, data[8][i].name));
        //     //console.log(data[8][i].name);
        // }

        var periodType = $("#periodType").val();
        var reportType = $("#reportType").val();
        var reporterType = $("#reporterType").val();
        $.ajax({
            url: "/showAnalysis?periodType=" + periodType + "&reportType=" + reportType + "&reporterType=" + reporterType,
            contentType: "application/json;charset=UTF-8",
            data: {},
            type: "post",
            success: function (data) {

                var htm = $("#Analysislist").empty();
                var htm = "<div>" +
                    "<div class=\"myaccount-table table-responsive text-center\">\n" +
                    "<div class=\"myaccount-table table-responsive text-center\">\n" +
                    "      <table class=\"table table-bordered table-striped\"  style=\"table-layout:fixed\">\n" +
                    "        <thead >" +
                    "          <tr>\n" +
                    "            <td>维修员工号</td>\n" +
                    "            <td>姓名</td>\n" +
                    "            <td>未完成任务</td>\n" +
                    "            <td>好评</td>\n" +
                    "            <td>差评</td>\n" +
                    "          </tr>   \n" +
                    "        </thead >" +
                    "        <tbody class=\"cloudTable_body \">\n";
                for (var p in data[8]) {
                    htm +=
                        "          <tr>\n" +
                        "            <td>" + data[8][p].id + "</td>\n" +
                        "            <td>" + data[8][p].name + "</td>\n" +
                        "            <td>" + data[8][p].unfinishedtasks + "</td>\n" +
                        "            <td>" + data[8][p].likeNumber + "</td>\n" +
                        "            <td>" + data[8][p].unLikeNumber + "</td>\n" +
                        "          </tr>   \n";

                    // console.log(data[p]);

                }
                htm +=
                    "        </tbody>\n" +
                    "      </table>\n" +
                    "    </div>" +
                    "</div>" +
                    "</div>";
                $("#Analysislist").append(htm);
            },
            error: function () {
                alert("维修工信息显示失败");
            }
        })
    }



    function showAnalysis() {
    var periodType = $("#periodType").val();
    var reportType = $("#reportType").val();
    var reporterType = $("#reporterType").val();
    $.ajax({
        url:"/showAnalysis?periodType="+periodType+"&reportType="+reportType+"&reporterType="+reporterType,
        contentType:"application/json;charset=UTF-8",
        data:{},
        type:"post",
        success:function (data) {
            // alert("成功");


            //console.log(data[8][0].name);

            var htm=$("#Analysislist").empty();
            var htm="<div>"+
                "<div class=\"myaccount-table table-responsive text-center\">\n" +
                "<div class=\"myaccount-table table-responsive text-center\">\n" +
                "      <table class=\"table table-bordered\"  style=\"table-layout:fixed\">\n" +
                "        <thead >"+
                "          <tr>\n" +
                "            <td>报修者学号/工号</td>\n" +
                "            <td>姓名</td>\n" +
                "            <td>身份</td>\n" +
                "            <td>报修内容</td>\n" +
                "            <td>电话号码</td>\n" +
                "            <td>报修时间</td>\n" +
                "          </tr>   \n" +
                "        </thead >"+
                "        <tbody class=\"cloudTable_body \">\n" ;
            for(var p in data[0]){
                htm+=
                    "          <tr>\n" +
                    "            <td>"+data[0][p].reporterid+"</td>\n" +
                    "            <td>"+data[0][p].reportername+"</td>\n" +
                    "            <td>"+data[0][p].reportertype+"</td>\n" +
                    "            <td style=\"overflow:hidden;white-space:nowrap;text-overflow:ellipsis;\" title=\""+data[0][p].repairdesc+"\">"+data[0][p].repairdesc+"</td>\n" +
                    "            <td>"+data[0][p].telephone +"</td>\n" +
                    "            <td>"+new Date(data[0][p].date).Format("yyyy-MM-dd:hh:mm:ss")+"</td>\n" +
                    "          </tr>   \n";

                // console.log(data[p]);

            }
            htm+=
                "        </tbody>\n" +
                "      </table>\n" +
                "    </div>"+
                "</div>"+
                "</div>";
            $("#Analysislist").append(htm);

            //location.reload();



                console.log(data);



            var Chartdata=[];


            Chartdata[0]=data[1].stu1+data[2].tea1;//供电报修数
            Chartdata[1]=data[1].stu2+data[2].tea2;//供水报修数
            Chartdata[2]=data[1].stu3+data[2].tea3;//修建报修数
            Chartdata[3]=data[1].stu4+data[2].tea4;//网络报修数
            Chartdata[4]=data[6];//好评数
            Chartdata[5]=data[7];//好评数
            var message="全部用户统计情况";
            if(reporterType=="0"&&reportType=="0"){
                Chartdata[0]=data[1].stu1+data[2].tea1;
                Chartdata[1]=data[1].stu2+data[2].tea2;
                Chartdata[2]=data[1].stu3+data[2].tea3;
                Chartdata[3]=data[1].stu4+data[2].tea4;
                var message="全部用户统计情况";
                showPieChart(Chartdata,message);
            }
            else if(reporterType=="学生"&&reportType=="0"){
                Chartdata[0]=data[1].stu1;
                Chartdata[1]=data[1].stu2;
                Chartdata[2]=data[1].stu3;
                Chartdata[3]=data[1].stu4;
                        var message="学生报修统计情况";
                        showPieChart(Chartdata,message);
            }
            else if(reporterType=="老师"&&reportType=="0"){
                Chartdata[0]=data[2].tea1;
                Chartdata[1]=data[2].tea2;
                Chartdata[2]=data[2].tea3;
                Chartdata[3]=data[2].tea4;
                        var message="老师报修统计情况";
                        showPieChart(Chartdata,message);
            }
            else if(reporterType=="0"&&reportType=="1"){
                        showNumPieChart(Chartdata,data[1].stu1,data[2].tea1);
            }
            else if(reporterType=="0"&&reportType=="2"){
                showNumPieChart(Chartdata,data[1].stu2,data[2].tea2);
            }
            else if(reporterType=="0"&&reportType=="3"){
                showNumPieChart(Chartdata,data[1].stu3,data[2].tea3);
            }
            else if(reporterType=="0"&&reportType=="4"){
                showNumPieChart(Chartdata,data[1].stu4,data[2].tea4);
            }
            else{
                        //console.log(data[1].stu1);
                showPieChart(Chartdata,message);
            }


        },
        error:function () {
                    alert("图表出现错误");
        }
            })

        }

        Date.prototype.Format = function(fmt) {
            var o = {
                "M+" : this.getMonth() + 1, // 月份
                "d+" : this.getDate(), // 日
                "h+" : this.getHours(), // 小时
                "m+" : this.getMinutes(), // 分
                "s+" : this.getSeconds(), // 秒
                "q+" : Math.floor((this.getMonth() + 3) / 3), // 季度
                "S" : this.getMilliseconds()
                // 毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
                    .substr(4 - RegExp.$1.length));
            for ( var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                        : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;

        };





        //报修类型饼状图
        function showPieChart(Chartdata,message) {

            // $.ajax({
            //     url:"/showAnalysis?periodType="+periodType+"&reportType="+reportType+"&reporterType="+reporterType,
            //     contentType:"application/json;charset=UTF-8",
            //     data:{},
            //     type:"post",
            //     success:function (data) {
            //         // alert("成功");
            //
            //         //location.reload();
            //         for(var i in data) {
            //             console.log(data[i]);
            //         }
            //     },
            //     error:function () {
            //         alert("审核出现错误");
            //     }
            // })


            // // 基于准备好的dom，初始化echarts实例
            var PieChart = echarts.init(document.getElementById('showPieCharts'));

            Pieoption = {
                //图表标题
                title : {
                    text: '报修单数量统计',
                    subtext: message,
                    // x 设置水平安放位置，默认左对齐
                    x:'center'
                },
                //提示框内容
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    // data: data.legendData,
                    data: ['供电','供水','修建','网络']
                    //selected: data.selected
                },
                series : [
                    {
                        name: '类型',
                        type: 'pie',
                        radius : '55%',
                        center: ['40%', '50%'],
                        //data: data.seriesData,
                        data: [
                            {value:Chartdata[0], name:'供电'},
                            {value:Chartdata[1], name:'供水'},
                            {value:Chartdata[2], name:'修建'},
                            {value:Chartdata[3], name:'网络'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            PieChart.setOption(Pieoption);



            //柱状图
            var HistogramChart = echarts.init(document.getElementById('showHistogramCharts'));

            // 指定图表的配置项和数据
            var Histogramoption = {
                title: {
                    text: '报修单统计表',
                    subtext: "各种维修类型报修数量",
                    x:'center'

        },
                tooltip: {},
                legend: {
                    data:['报修单数'],
                    right: 10,
                    top: 20,
                    bottom: 20,
                },
                xAxis: {
                    data: ["供电","供水","修建","网络"]
                },
                yAxis: {},
                series: [{
                    name: '报修单数',
                    type: 'bar',
                    data: [Chartdata[0], Chartdata[1], Chartdata[2], Chartdata[3]]
                }]
            };
            HistogramChart.setOption(Histogramoption);

            // var LinkChart = echarts.init(document.getElementById('showLinkCharts'));
            //
            // //折线图
            //
            // Linkoption = {
            //     xAxis: {
            //         type: 'category',
            //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            //     },
            //     yAxis: {
            //         type: 'value'
            //     },
            //     series: [{
            //         data: [820, 932, 901, 934, 1290, 1330, 1320],
            //         type: 'line'
            //     }]
            // };
            //
            // LinkChart.setOption(Linkoption);


            //显示好评差评率的报修饼状图
            var LikePieChart = echarts.init(document.getElementById('showLikeCharts'));

            LikePieoption = {
                //图表标题
                title : {
                    text: '报修单满意统计',
                    subtext: "维修人员服务总的满意程度",
                    // x 设置水平安放位置，默认左对齐
                    x:'center'
                },
                //提示框内容
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    // data: data.legendData,
                    data: ['好评','差评']
                    //selected: data.selected
                },
                series : [
                    {
                        name: '类型',
                        type: 'pie',
                        radius : '55%',
                        center: ['40%', '50%'],
                        //data: data.seriesData,
                        data: [
                            {value:Chartdata[4], name:'好评'},
                            {value:Chartdata[5], name:'差评'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            LikePieChart.setOption(LikePieoption);




        }

        //报修数量饼状图
        function showNumPieChart(Chartdata,stuNum,teaNum) {


    // // 基于准备好的dom，初始化echarts实例
    var PieChart = echarts.init(document.getElementById('showPieCharts'));

    Pieoption = {
        //图表标题
        title : {
            text: '报修单数量统计',
            subtext: "学生和老师的占比",
            // x 设置水平安放位置，默认左对齐
            x:'center'
        },
        //提示框内容
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            // data: data.legendData,
            data: ['老师','学生']
            //selected: data.selected
        },
        series : [
            {
                name: '类型',
                type: 'pie',
                radius : '55%',
                center: ['40%', '50%'],
                //data: data.seriesData,
                data: [
                    {value:teaNum, name:'老师'},
                    {value:stuNum, name:'学生'},
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    PieChart.setOption(Pieoption);



    //柱状图
    var HistogramChart = echarts.init(document.getElementById('showHistogramCharts'));

    // 指定图表的配置项和数据
    var Histogramoption = {
        title: {
            text: '报修单统计表',
            subtext: "报修数量",
            x:'center'
        },
        tooltip: {},
        legend: {
            data:['报修单数']
        },
        xAxis: {
            data: ["学生","老师"]
        },
        yAxis: {},
        series: [{
            name: '报修单数',
            type: 'bar',
            data: [stuNum, teaNum]
        }]
    };
    HistogramChart.setOption(Histogramoption);

//显示好评差评率的报修饼状图
            var LikePieChart = echarts.init(document.getElementById('showLikeCharts'));

            LikePieoption = {
                //图表标题
                title : {
                    text: '报修单满意统计',
                    subtext: "维修人员服务总的满意程度",
                    // x 设置水平安放位置，默认左对齐
                    x:'center'
                },
                //提示框内容
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    // data: data.legendData,
                    data: ['好评','差评']
                    //selected: data.selected
                },
                series : [
                    {
                        name: '类型',
                        type: 'pie',
                        radius : '55%',
                        center: ['40%', '50%'],
                        //data: data.seriesData,
                        data: [
                            {value:Chartdata[4], name:'好评'},
                            {value:Chartdata[5], name:'差评'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            LikePieChart.setOption(LikePieoption);
}

</script>

        <%--图标显示--%>
<%--<script type="text/javascript">--%>
    <%--// // 基于准备好的dom，初始化echarts实例--%>
    <%--var myChart = echarts.init(document.getElementById('showCharts'));--%>

    <%--// 指定图表的配置项和数据--%>
    <%--// var option = {--%>
    <%--//     title: {--%>
    <%--//         text: '保修单统计表'--%>
    <%--//     },--%>
    <%--//     tooltip: {},--%>
    <%--//     legend: {--%>
    <%--//         data:['保修单数']--%>
    <%--//     },--%>
    <%--//     xAxis: {--%>
    <%--//         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]--%>
    <%--//     },--%>
    <%--//     yAxis: {},--%>
    <%--//     series: [{--%>
    <%--//         name: '保修单数',--%>
    <%--//         type: 'bar',--%>
    <%--//         data: [5, 20, 36, 10, 10, 20]--%>
    <%--//     }]--%>
    <%--// };--%>


    <%--var data = genData(50);--%>

    <%--option = {--%>
        <%--//图表标题--%>
        <%--title : {--%>
            <%--text: '保修单数量统计',--%>
            <%--subtext: '纯属虚构',--%>
            <%--// x 设置水平安放位置，默认左对齐--%>
            <%--x:'center'--%>
        <%--},--%>
        <%--//提示框内容--%>
        <%--tooltip : {--%>
            <%--trigger: 'item',--%>
            <%--formatter: "{a} <br/>{b} : {c} ({d}%)"--%>
        <%--},--%>
        <%--legend: {--%>
            <%--type: 'scroll',--%>
            <%--orient: 'vertical',--%>
            <%--right: 10,--%>
            <%--top: 20,--%>
            <%--bottom: 20,--%>
            <%--// data: data.legendData,--%>
            <%--data: ['供电','供水','修建','网络'],--%>
            <%--selected: data.selected--%>
        <%--},--%>
        <%--series : [--%>
            <%--{--%>
                <%--name: '类型',--%>
                <%--type: 'pie',--%>
                <%--radius : '55%',--%>
                <%--center: ['40%', '50%'],--%>
                <%--// data: data.seriesData,--%>
                <%--data: [--%>
                    <%--{value:335, name:'供电'},--%>
                    <%--{value:310, name:'供水'},--%>
                    <%--{value:234, name:'修建'},--%>
                    <%--{value:135, name:'网络'}--%>
                <%--],--%>
                <%--itemStyle: {--%>
                    <%--emphasis: {--%>
                        <%--shadowBlur: 10,--%>
                        <%--shadowOffsetX: 0,--%>
                        <%--shadowColor: 'rgba(0, 0, 0, 0.5)'--%>
                    <%--}--%>
                <%--}--%>
            <%--}--%>
        <%--]--%>
    <%--};--%>




    <%--function genData(count) {--%>
        <%--var nameList = [--%>
            <%--'供电','供水','修建','网络'--%>
        <%--];--%>
        <%--var legendData = [];--%>
        <%--var seriesData = [];--%>
        <%--var selected = {};--%>
        <%--for (var i = 0; i < 50; i++) {--%>
            <%--name = Math.random() > 0.65--%>
                <%--? makeWord(4, 1) + '·' + makeWord(3, 0)--%>
                <%--: makeWord(2, 1);--%>
            <%--legendData.push(name);--%>
            <%--seriesData.push({--%>
                <%--name: name,--%>
                <%--value: Math.round(Math.random() * 100000)--%>
            <%--});--%>
            <%--selected[name] = i < 6;--%>
        <%--}--%>

        <%--return {--%>
            <%--legendData: legendData,--%>
            <%--seriesData: seriesData,--%>
            <%--selected: selected--%>
        <%--};--%>

        <%--function makeWord(max, min) {--%>
            <%--var nameLen = Math.ceil(Math.random() * max + min);--%>
            <%--var name = [];--%>
            <%--for (var i = 0; i < nameLen; i++) {--%>
                <%--name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);--%>
            <%--}--%>
            <%--return name.join('');--%>
        <%--}--%>
    <%--}--%>

    <%--// 使用刚指定的配置项和数据显示图表。--%>
    <%--myChart.setOption(option);--%>
<%--</script>--%>

<script>
    $(function(){showAnalysis();});
</script>






</body>
</html>
